<template>
   <!-- 输入框 -->
   <header class="header">
      <h1>小黑记事本</h1>
      <!-- ! 注册点击添加 和 回车添加事件 -->
      <input @keyup.enter="handleAdd" placeholder="请输入任务" class="new-todo" v-model="todoname" />
      <button class="add" @click="handleAdd">添加任务</button>
    </header>

</template>

<script>
export default {
    data(){
        return{
            // ! v-model 双向绑定
            todoname:''
        }
    },
    methods:{
        // ! 子传父，将表单内容传递给父组件
        handleAdd(){
            // ! 表单验证
            if(!this.todoname.trim()){
                return alert('请输入内容！')
            }
            this.$emit('add',this.todoname)
            // ! 表单清空
            this.todoname=''
        }
    }
}
</script>

<style>

</style>